<script lang="ts" setup>
import { reactive } from 'vue'

const formInline = reactive({
    region1: '',
    region2: '',
})

const onSubmit = () => {
    console.log('submit!')
}
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(4)
const dynasty = ref('')
const subject = ref('')
const totalpage = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogname = ref()
const displaydel = ref(false)
const title = ref('')

const handleSizeChange = (size) => {
    pageSize.value = size
    shiciData()
}
const handleCurrentChange = (current) => {
    currentPage.value = current
    shiciData()
}
import {
    Delete,
    Edit,
    WarningFilled
} from '@element-plus/icons-vue'

import { shicilistServer } from '@/api/shici.js';
import { ElMessage, FormRules } from 'element-plus';

const tableData = ref()

const add_reg = /^[\u4e00-\u9fa5]+$/
interface RuleForm {
    addtitle: String,
    addpara: String,
    adddynasty: String,
    addauthor: String,
    addsubject: String,
    addId: Number,
}

const addData = ref<RuleForm>({
    addtitle: '',
    addpara: '',
    addauthor: '',
    adddynasty: '',
    addsubject: '',
    addId: null,
})


const shiciData = async () => {
    let params = {
        countpage: currentPage.value,
        pagenumber: pageSize.value,
        dynasty: dynasty.value ? dynasty.value : null,
        subject: subject.value ? subject.value : null,
        title: title.value ? title.value : null,
    }

    let result = await shicilistServer(params)

    tableData.value = result.data.items
    totalpage.value = result.data.total
}

shiciData();

const clearadddata = () => {
    addData.value = {
        addtitle: '',
        addpara: '',
        addauthor: '',
        adddynasty: '',
        addsubject: '',
        addId: null,
    }
}

import { addshiciServer, updatashiciServer, delshiciServer } from '@/api/shici.js';
const addshici = async () => {
    dialogVisible.value = false;
    let result = await addshiciServer(addData.value) as any;
    ElMessage.success(result.message ? result.message : '添加成功')
    clearadddata()
    shiciData()
}

const updatashici = async () => {
    dialogVisible.value = false;
    let result = await updatashiciServer(addData.value) as any;
    ElMessage.success(result.message ? result.message : '修改成功')
    clearadddata()
    shiciData()
}

const delshici = async () => {
    displaydel.value = false
    let result = await delshiciServer(addData.value.addId) as any;
    ElMessage.success(result.message ? result.message : '删除成功')
    clearadddata()
    shiciData()
}

const rules = reactive<FormRules<RuleForm>>({
    addtitle: [
        { required: true, message: '请输入诗词标题', trigger: 'blur' },
        { pattern: add_reg, message: '诗词标题应为全中文', trigger: 'blur' }
    ],

    addauthor: [
        { required: true, message: '请输入诗词作者名', trigger: 'blur' },
        { pattern: add_reg, message: '诗词作者名应为全中文', trigger: 'blur' }
    ],

    addpara: [
        { required: true, message: '请输入诗词内容', trigger: 'blur' },
        { min: 1, max: 8000, message: '诗词内容应为全中文', trigger: 'blur' }
    ],
})

const showupdataDiglog = (row) => {
    dialogVisible.value = true
    dialogname.value = '修改诗词'
    addData.value.addauthor = row.author
    addData.value.adddynasty = row.dynasty
    addData.value.addpara = row.paragraphs
    addData.value.addsubject = row.subject
    addData.value.addtitle = row.title
    addData.value.addId = row.idS

}

const showdelDiglog = (row) => {
    displaydel.value = true
    dialogname.value = '提示'
    addData.value.addId = row.idS

}

import { ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
    )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}
import { useToken } from '@/stores/token.js';
const token = useToken()

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {

}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件大小不能超过 2MB!')
        return false
    }
    return true
}
import type { UploadInstance } from 'element-plus'
</script>


<template>

    <el-card style="max-width: 100%">
        <div class="card-header">
            <span>诗词管理</span>
            <el-button type="primary" @click="dialogVisible = true, dialogname = '添加诗词'">添加诗词</el-button>
        </div>
        <div style="margin-top: 20px;">
            <hr>
        </div>
        <el-form :inline="true" class="form-inline">
            <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="title"></el-input>
            </el-form-item>
            <el-form-item label="朝代">
                <el-select v-model="dynasty" placeholder="请选择" clearable>
                    <el-option label="宋朝" value="宋朝" />
                    <el-option label="唐朝" value="唐朝" />
                    <el-option label="三国" value="三国" />
                    <el-option label="战国" value="战国" />
                    <el-option label="西汉" value="西汉" />
                    <el-option label="东汉" value="东汉" />
                    <el-option label="清朝" value="清朝" />
                    <el-option label="春秋" value="春秋" />
                    <el-option label="现代" value="现代" />
                </el-select>
            </el-form-item>
            <el-form-item label="题材">
                <el-select v-model="subject" placeholder="请选择" clearable>
                    <el-option label="曹操诗集" value="曹操诗集" />
                    <el-option label="楚辞" value="楚辞" />
                    <el-option label="纳兰性德诗集" value="纳兰性德诗集" />
                    <el-option label="宋诗" value="宋诗" />
                    <el-option label="唐诗" value="唐诗" />
                    <el-option label="诗经" value="诗经" />
                    <el-option label="现代诗" value="现代诗" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="shiciData()">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="default" @click="dynasty = '', subject = '', title = '', shiciData()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" table-layout='auto'>
            <el-table-column prop="idS" label="id" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="paragraphs" label="诗词" style="width: 400px;" />
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="dynasty" label="朝代" />
            <el-table-column prop="subject" label="题材" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button type="primary" :icon="Edit" circle @click="showupdataDiglog(row)" />
                    <el-button type="danger" :icon="Delete" circle @click="showdelDiglog(row)" />
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="dialogname" width="500">
            <el-form ref="form" class="addshici" :rules="rules" :model="addData">
                <el-form-item label="标题" prop="addtitle">
                    <el-input placeholder="请输入标题" v-model="addData.addtitle"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="addpara">
                    <el-input placeholder="请输入内容" v-model="addData.addpara"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="addauthor">
                    <el-input placeholder="请输入作者" v-model="addData.addauthor"></el-input>
                </el-form-item>
                <el-form-item label="朝代">
                    <el-select v-model="addData.adddynasty" placeholder="请选择" clearable>
                        <el-option label="宋朝" value="宋朝" />
                        <el-option label="唐朝" value="唐朝" />
                        <el-option label="三国" value="三国" />
                        <el-option label="战国" value="战国" />
                        <el-option label="西汉" value="西汉" />
                        <el-option label="东汉" value="东汉" />
                        <el-option label="清朝" value="清朝" />
                        <el-option label="春秋" value="春秋" />
                        <el-option label="现代" value="现代" />
                    </el-select>
                </el-form-item>
                <el-form-item label="题材">
                    <el-select v-model="addData.addsubject" placeholder="请选择" clearable>
                        <el-option label="曹操诗集" value="曹操诗集" />
                        <el-option label="楚辞" value="楚辞" />
                        <el-option label="纳兰性德诗集" value="纳兰性德诗集" />
                        <el-option label="宋诗" value="宋诗" />
                        <el-option label="唐诗" value="唐诗" />
                        <el-option label="诗经" value="诗经" />
                        <el-option label="现代诗" value="现代诗" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-upload class="upload-demo" multiple action="http://localhost:8080/shici/uploadfile"
                        :show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        :headers="{ 'Authorization': token.token }" :auto-upload="true">
                        <template #trigger>
                            <el-button type="primary">上传附件</el-button>
                        </template>

                        <template #tip>
                            <div class="el-upload__tip">
                                文件大小不能超过2MB
                            </div>
                        </template>
                    </el-upload>
                    <el-button @click="dialogVisible = false, clearadddata()">取消</el-button>
                    <el-button type="primary" @click="dialogname == '添加诗词' ? addshici() : updatashici()">确认</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="displaydel" :title=dialogname width="500">
            <el-icon color="red">
                <WarningFilled />
            </el-icon>
            <span style="text-align: center;display:block;font-size: 17px;">是否确认删除该诗词</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="displaydel = false, clearadddata()">否</el-button>
                    <el-button type="primary" @click="delshici()">是</el-button>
                </div>
            </template>
        </el-dialog>



        <!--layout控制组件展示顺序-->
        <el-pagination class="el-p" v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[4, 8, 12, 16]" :small="small" :disabled="disabled" :background="background"
            layout="jumper, prev, pager, next, sizes, total" :total="totalpage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>
</template>

<style scoped>
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.form-inline .el-input {
    --el-input-width: 220px;
}

.form-inline .el-select {
    --el-select-width: 220px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-inline-end: 20px;
}
</style>